<template>
  <div class="main-content">
    <div style="display: flex;">
      <div style="flex: 1; margin-right: 10px; width: 0;">
        <!-- 博客内容 -->
        <div class="card" style="padding: 30px; margin-bottom: 10px;">
          <!-- <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px">{{ blog.title }}</div>  -->
          <div style="font-weight: bold; font-size: 24px; margin-bottom: 20px">{{ BlogTitle }}</div>
          <div style="color: #666; margin-bottom: 20px;">
            <span style="margin-right: 20px;"><i class="el-icon-user">{{author}}</i></span>
            <span style="margin-right: 20px;"><i class="el-icon-date">2024-6-10</i></span>
            <span style="margin-right: 20px;"><i class="el-icon-view">55</i></span>
            <span>
              <el-tag type="primary" style="margin-right: 5px;">基础</el-tag>
              <el-tag type="primary" style="margin-right: 5px;">simple</el-tag>
            </span>
          </div>
          <div class="w-e-text" >
            <div>
              <vue-markdown :source="BlogContent"></vue-markdown>
            </div>
          </div>
          <!-- 点赞收藏 -->
          <div class="card" style="text-align: center; margin-top: 10px; font-size: 20px; color: #666; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0); max-height: 50px">
            <span style="margin-right: 20px; cursor: pointer;"><i class="el-icon-s-opportunity"></i>{{likes}}</span>
            <span style="cursor: pointer;"><i class="el-icon-star-off"></i>{{ comments }}</span>
          </div>
        </div>

        <!-- 评论 -->
        <div class="card" style="margin-top: 10px;">
          <h2 style="margin-bottom: 20px;">评论 {{ CommentCount}}</h2>
          <div style="margin-bottom: 20px;">
            <el-input type="textarea" placeholder="请输入评论内容"></el-input>
            <div style="text-align: right; margin-top: 5px;">
              <el-button type="primary">发 送</el-button>
            </div>
          </div>

          <div>
            <div style="display: flex; gap: 20px; margin-bottom: 20px;">
              <img src="../../assets/images/weishen.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
              <div style="flex: 1;">
                <!-- 评论 -->
                <div style="margin-bottom: 10px;">
                  <div style="color: #666; margin-bottom: 10px; font-size: 15px;">伟神</div>
                  <div style="color: #444; margin-bottom: 10px;">213112</div>
                  <div style="color: #888; font-size: 13px;"><span style="margin-right: 20px;">2024-6-12</span>
                    <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                  </div>
                  <!-- 回复 -->
                  <div style="display: flex; gap: 20px; margin: 20px 0;">
                    <img src="../../assets/images/luoqixi.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
                    <div style="flex: 1;">
                      <div style="color: #666; margin-bottom: 10px; font-size: 15px;">懒神</div>
                      <div style="color: #444; margin-bottom: 10px;">end</div>
                      <div style="color: #888; font-size: 13px;"><span style="margin-right: 20px;">2024-6-5</span>
                        <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                      </div>
                    </div>
                  </div>

                  <div style="display: flex; gap: 20px; margin: 20px 0;">
                    <img src="../../assets/images/duizhang.jpg" style="width: 50px; height: 50px; border-radius: 50%;">
                    <div style="flex: 1;">
                      <div style="color: #666; margin-bottom: 10px; font-size: 15px;">牢队</div>
                      <div style="color: #444; margin-bottom: 10px;">979989</div>
                      <div style="color: #888; font-size: 13px;"><span style="margin-right: 20px;">2024-6-10</span>
                        <span style="cursor: pointer;"><i class="el-icon-s-comment"></i>评论</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div style="width: 260px;">
        <div class="card">
          <div style="display: flex;">
            <img :src="headurl" style="width: 50px; height: 50px; border-radius: 50%;">
            <div style="flex: 1; margin-left: 20px;">
              <div style="font-weight: bold; margin-bottom: 5px;" @click="$router.push(`/front/user/${uid}`)">{{author}}</div>
              <div style="color: #666; font-size: 13px;" class="line2">nb</div>
            </div>
          </div>
          <div style="display: flex; padding-top: 10px;">
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">文章</div>
              <div style="color: #888;">3</div>
            </div>
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">点赞</div>
              <div style="color: #888;">14</div>
            </div>
            <div style="flex: 1; text-align: center;">
              <div style="margin-bottom: 5px;">收藏</div>
              <div style="color: #888;">13</div>
            </div>
          </div>
        </div>

        <div class="card" style="margin-top: 10px;">
          <div style="font-weight: bold; font-size: 18px; padding-bottom: 10px; border-bottom: 1px solid #ddd;">相关推荐</div>
          <div>
            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">世界冠军柯洁：“我坚持最久的一件事是围棋”</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>4</span>
                <span style="margin-left: 20px;">点赞</span><span>0</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">围棋中简单的布局思路</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>100</span>
                <span style="margin-left: 20px;">点赞</span><span>20</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">新人王赛决赛在上海马桥开幕 首局王楚轩先胜周子弈</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>66</span>
                <span style="margin-left: 20px;">点赞</span><span>55</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">晚安波士顿</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>0</span>
                <span style="margin-left: 20px;">点赞</span><span>101</span>
              </div>
            </div>

            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>
            <div>
              <div style="margin-top: 20px; font-size: 15px;" class="recommend">独行侠总冠军</div>
              <div style="color: #888; margin-top: 5px;">
                <span>阅读</span><span>77</span>
                <span style="margin-left: 20px;">点赞</span><span>11</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {useRoute} from "vue-router/composables";
import VueMarkdown from 'vue-markdown'

export default {
  name: 'BlogDetail',
  data() {
    return {
      markdown:'# Hello, Vue Markdown!',
      BlogTitle: 'SQL中的视图',
      BlogContent: ``,
      CommentCount:'2',
      blog:{},
      tagsArr:[],
      author:'',
      headurl:'',
      uid:'',
      comments:'',
      likes:'',

    };
  },
  methods: {
    getBlogDetail(){
      let tid = useRoute().params.tid;
      let url = `/api/post/${tid}`;
      this.$http.get(url, {headers: {token: this.token}}).then(res=>{
        this.BlogTitle = res.data.data.ttitle;
        this.BlogContent = res.data.data.tcontent;
        this.author = res.data.data.author;
        this.headurl = res.data.data.unheat;
        this.CommentCount = res.data.data.comments;
        this.uid = res.data.data.uid;
        this.comments = res.data.data.comments;
        this.likes = res.data.data.likes;
      })
    }
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    } else {
      this.getBlogDetail();
    }
  },
  components: {
    'vue-markdown': VueMarkdown
  }
}
</script>

<style scoped>
.w-e-text {
  font-size: 15px;
  color: #333;
  line-height: 2.5;
}
.recommend:hover{
  color: #2a60c9;
  cursor: pointer;
}
</style>